<template>
  <div class="mybarnav">
   <!-- 快速导航 -->
    <van-row type="flex" class="songs">
      <van-col span="5">
        <span class="iconfont" @click="toSinger">&#xf014b;</span>
        <span class="myfont" @click="toSinger">歌手</span>
      </van-col>
      <van-col span="5">
        <span class="iconfont" @click="toSongList">&#xe636;</span>
        <span class="myfont" @click="toSongList">分类</span>
      </van-col>
       <van-col @click="tovideo" span="4">
        <van-icon   name="live" size="2.3rem" color="#34c37e" tag="i" />
        <span class="myfont">视频</span>
      </van-col>
      <van-col span="5">
        <span class="iconfont" @click="topList(19723756)">&#xe6c5;</span>
        <span class="myfont" @click="topList(19723756)">飙升榜单</span>
      </van-col>
      
      <van-col span="5">
        <span class="iconfont" @click="toMine">&#xe86d;</span>
        <span class="myfont" @click="toMine">我的收藏</span>
      </van-col>
    </van-row>
  </div>
</template>

<script>
export default {
  name: "MusicNavBar",

  data() {
    return {};
  },

  mounted() {},

  methods: {
    tovideo() {
      this.$router.push("/video");
    },
    toSongList() {
      this.$router.push("/VueMusicSongClass");
    },
    topList(id) {
      this.$router.push({
        path: "/MusicDetail",
        query: { id },
      });
    },
    toSinger() {
      this.$router.push("/MusicSinger");
    },
    toMine() {
      this.$router.push("/MusicMine");
    },
  },
};
</script>

<style lang="less" scoped>
.mybarnav{box-shadow: 0 0.1785rem 0.1785rem 0 #f4f4f4;
border-top:.1785rem solid #f8f8f8;

}
.songs {
  height: 3.4rem;
  .van-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 0.875rem;
    .iconfont {
      font-size: 1.875rem;
      color: #34c37e;
      margin-bottom: 0.1875rem;
     
    }
     .myfont{font-size: 12px;
      color:#666;
      display: block;}
  }
}
</style>